
<template>

    <div class="banner">
        <swiper
            class="swiper"
            :options="swiperOption"
            v-if="bannersInit"
        >
            <swiper-slide
                v-for="(item, index) in banners"
                :key="index"
            >
                <img
                    :src="item.imageUrl"
                    :alt="item.typeTitle"
                    v-if="index===index"
                />
            </swiper-slide>
        </swiper>
        <div
            class="swiper-pagination"
            slot="pagination"
        ></div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
    name: 'Banner',
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    data() {
        return {
            banners: [],
            swiperOption: {
                slidesPerView: 3,
                spaceBetween: 30,
                slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                // centeredSlides: true,
                // paginationClickable: true,
                grabCursor: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                autoplay: true,

            }
        }
    },

    created() {

    },
    mounted() {
        this.getBanner()
    },

    computed: {
        bannersInit() {
            return this.banners.length
        }
    },
    methods: {
        async getBanner() {
            const { data: res } = await this.$api.getBanner();
            if (res.code !== 200) {
                return this.$message.error('获取banner图失败！')
            }
            this.banners = res.banners;
            // console.log(this.banners);

        },

    }

}
</script>

<style lang="less" scoped>
.banner {
    margin-top: 10px;
}
.banner /deep/ .swiper-pagination {
    width: 100%;
    bottom: -20px;
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #a3a3ac;
        opacity: 0.8;
        border-radius: 50%;
        margin: 0 5px;
        &.swiper-pagination-bullet-active {
            opacity: 1;
            width: 15px;
            border-radius: 4px;
            background: #fa2800;
        }
    }
}
.banner {
    position: relative;
    img {
        border-radius: 3px;
    }
}
</style>